<template>
    <div id="app">
        <div class="btns" style="margin:20px 0;display: flex;">
            <div style="max-width:350px;display: flex;margin-right: 10px;">
                <t-input v-model="shopName" clearable placeholder="请输入商品名称" @clear="onClear" @blur="onBlur" />
                <t-button variant="outline" @click="searchShop" theme="primary" ghost>搜索</t-button>
            </div>
            <t-button theme="primary" @click="addShop">
                <add-icon slot="icon" />
                添加商品
            </t-button>
            <t-button theme="default" @click="paixu = 1">从新到旧</t-button>
            <t-button theme="default" @click="paixu = 2">从旧到新</t-button>
        </div>
        <t-loading :loading="loading" size="medium" show-overlay>
            <t-base-table :table-layout="auto" stripe hover row-key="id" :data="filterFood" :columns="columns"
                :max-height="'70vh'" :pagination="{ total: food.length }">
                <template #shopimg="{ col, row }">
                    <img style="border-radius:5px;" width="100" height="100" :src="row.icon" alt="">
                </template>
                <template #status="{ col, row }">
                    <t-switch @click="statusChange(row._id, row.status)" :customValue="[1, 0]" v-model="row.status"
                        size="large" :label="['上架中', '下架中']"></t-switch>
                </template>
                <template #price="{ col, row }">
                    <t-tag theme="warning">￥{{ row.price }}</t-tag>
                </template>
                <template #btn="{ col, row }">
                    <t-button theme="primary" @click="updataShop(row)">编辑</t-button>
                    <t-popconfirm @confirm="deleteShop(row._id)" content="确认删除吗">
                        <t-button theme="danger">删除</t-button>
                    </t-popconfirm>
                </template>
                <template #label="{ col, row }">
                    <template v-for="(value, i) in row.label" :key="i">
                        <t-tag style="margin:0 5px 5px 0;">{{ value.text }}</t-tag>
                    </template>
                </template>
            </t-base-table>
        </t-loading>
    </div>

    <div>
        <!-- <template v-if="visible"> -->
        <t-drawer :footer="false" size="55vw" v-model:visible="visible" attach="body" :mode="mode"
            :placement="placement" header="添加商品">
            <detail-add-food></detail-add-food>
        </t-drawer>
        <!-- </template> -->
        <t-drawer :footer="false" size="55vw" v-model:visible="visible2" attach="body" :mode="mode"
            :placement="placement" header="修改商品">
            <detail-updata-food :data="updataInfo"></detail-updata-food>
        </t-drawer>

    </div>
</template>

<script setup>
import { FoodStatusChange, deleteFood } from '@/http/modules/store'
import detailAddFood from './detail-add-food.vue'
import detailUpdataFood from './detail-updata-food.vue'
import { ref, toRaw } from '@vue/reactivity'
import { computed, watch } from '@vue/runtime-core';
import mitt from '@/utils/mitt/index'
const loading = ref(true)
const props = defineProps({
    foodlist: {
        typeof: Array,
        default: () => []
    }
})
const food = computed(() => {
    loading.value = false
    return props.foodlist.map(n => {
        return {
            ...n
            // label: JSON.parse(n.label)
        }
    })
})

const paixu = ref(0);

const filterFood = computed(() => {
    let fk_food = food.value;
    switch (paixu.value) {
        case 1:
            fk_food = fk_food.sort((a, b) => {
                return new Date(a._createTime).getTime() - new Date(b._createTime).getTime()
            })
            break;
        case 2:
            fk_food = fk_food.sort((a, b) => {
                return new Date(b._createTime).getTime() - new Date(a._createTime).getTime()
            })
            break;
    }
    return fk_food
})


const columns = [
    {
        width: '100',
        colKey: 'shopid',
        title: '序号',
        // 对齐方式
        align: 'center',
        // 设置列类名
        className: 'custom-column-class-name',
        // 设置列属性
        attrs: {
            'data-id': 'first-column',
        },
    },
    {
        colKey: 'name',
        title: '商品名字', width: 100
    },
    {
        colKey: 'icon',
        title: '图片',
        // type-slot-name 会被用于自定义单元格的插槽名称
        cell: 'shopimg', width: 150
    },
    {
        colKey: 'price',
        title: '价格',
        cell: "price", width: 100
    },
    {
        colKey: "fenlei",
        title: "分类", width: 130
    },
    {
        colKey: 'status',
        title: '状态',
        // type-slot-name 会被用于自定义单元格的插槽名称
        cell: 'status', width: 120
    },
    {
        colKey: 'label',
        title: '标签',
        cell: 'label',
        width: 240
    },
    {
        colKey: 'type',
        title: '操作',
        // type-slot-name 会被用于自定义单元格的插槽名称
        cell: 'btn',
        fixed: 'right',
        width: 180
    }
];
const visible = ref(false);
const visible2 = ref(false);
const mode = ref('push');
const placement = ref('right');

const addShop = () => {
    visible.value = true
    mitt.emit('isShowUP', true)
}

mitt.on("closeChouTi", () => {
    visible.value = false
    mitt.emit('isShowUP', false)
})
mitt.on("closeChouTi2", () => {
    visible2.value = false
})

// 获取商品
const updataShop = (row) => {
    updataInfo.value = row;
    visible2.value = true
}
const updataInfo = ref();

// 修改商品状态
const statusChange = (id, status) => {
    FoodStatusChange(id, status).then(res => {
        ElMessage({
            message: '修改状态成功',
            grouping: true,
            type: 'success',
        })
        mitt.emit("updateFood")
    })

}

// 删除订单
const deleteShop = (n) => {
    console.log('点击率', n);
    deleteFood(n).then(res => {
        mitt.emit("updateFood")
        ElMessage({
            message: '删除成功',
            type: 'success',
        })
    })

}

// 搜索商品
const shopName = ref();
watch(shopName, () => {
    mitt.emit('searchFood', shopName.value)
})
// const searchShop = () => {
//     console.log("您搜索了", shopName);
//     mitt.emit('searchFood', shopName.value)
// }
</script>
 
<style lang="less" scoped>
:deep(.table) {
    border-radius: 10px !important;
}

#app {
    --td-bg-color-secondarycontainer: rgba(255, 255, 255, 0.9);
    ;
    --td-bg-color-container: rgba(255, 255, 255, 0.2);
    ;
    border-radius: 10px;

    .btns {
        padding: 10px;
    }
}
</style>